<!--受理订单列表-->
<style lang="less" scoped>
.contain{
  padding:0;
  height:100vh;
  position: relative;
}
.listhead-fix {
  background: #fff;
  .m-sech-wrap {
    padding-bottom: .1rem;
  }
  .m-sech-box {
    background: #f5f5f5;
  }
}
.lltab{
  padding-bottom: .2rem;
  .vux-tab {
    height:34px;
    .vux-tab-item {
      line-height: 34px
    }
  }
}
.noDate_page {
  padding-top: calc(~"(100vh - 2.4rem) / 2")
}
.mb20 {
  margin-bottom: .2rem;
}
.todoItem {
  position: relative;
  padding: 0 .3rem;
  p {
    line-height: .54rem;
    span {
      text-align: center;
      flex:1;
      display: inline-block;
      &:first-of-type {
        text-align: left;
      }
      &:last-of-type {
        text-align: right;
      }
      .llse-zhi {
        color: #23a5a5;
      }
    }
  }
  label {
    width: 1rem;
    text-align: center;
    font-size:11px;
    position: absolute;
    background: rgba(35, 165, 165, 0.6);
    padding: .07rem .1rem;
    right:.3rem;
    top: .1rem;
    color:#fff;
    border-top-left-radius: .1rem;
    border-bottom-right-radius: .1rem;
    &.org {
      background: rgba(255, 102, 0, 0.6);
    }
    &.grnheavy {
      background: rgba(35, 165, 165, 1);
    }
    &.orgheavy {
      background: rgba(255, 102, 0, 1);
    }
    &.hide {
      display:none;
    }
  }
}
</style>



<template>
  <div class="contain">
    <div class="listhead-fix">
      <!--search-->
      <div class="m-sech-wrap mr20">
        <!-- <div class="flex1"> -->
          <router-link to='/search?type=SearchGenericOrders' class="m-sech-box displayflex">
            <i class="iconfont icon-search"></i>
            <div class="flex1 m-sech-ipt">
              <div class="txt">{{sechTxt || '输入业务单号/承运单位'}}</div>
            </div>
          </router-link>
      </div>
      <div class="lltab ft14">
        <tab bar-active-color="#77babd" defaultColor="#333333" active-color="#77babd" :line-width="3" :custom-bar-width="'15%'">
          <tab-item selected @on-item-click="tabNo = 1">配送中</tab-item>
          <tab-item @on-item-click="tabNo = 2">配送完成</tab-item>
        </tab>
      </div>
    </div>


    <div class="noDate_page" v-if="todolist.length <= 0">
      <div class="noDate_icon"><i class="iconfont icon-null"></i></div>
      暂无数据！
    </div>

    <scroller lock-x scrollbar-y use-pullup v-bind:height="scrollerHeight" @on-pullup-loading="getData" v-if="todolist.length>0" :pullup-config="ScrollerConfig" ref="Scroller" v-bind:style="{top:scrollerTop}">
      <div class="acpt-list">
        <div class="acpt-list-wrap mb20" v-for="item in todolist" v-on:click="goProgress(item)">
          <div class="todoItem">
            <label v-bind:class="getLabelClass(item.State)">{{item.State | transState}}</label>
            <p>承运单位：{{item.DeliverName}}</p>
            <p>业务单号：{{item.BBillNo}}</p>
            <p class="displayflex">
              <span>{{item.DepartureCity | city}}/{{item.DepartureDistrict | district}}</span>
              <span><i class="llse llse-zhi"></i></span>
              <span>{{item.ArrivalCity | city}}/{{item.ArrivalDistrict | district}}</span>
            </p>
          </div>
        </div>
      </div>
      <div v-if="noMore" class="loader-over">没有更多记录了</div>
    </scroller>
  </div>
</template>

<script>
import manageFooter from '@/components/core/footer/manage.footer.vue';
export default {
  name:'acceptList',
  components: {
    manageFooter
  },
  data() {
    return {
      tabNo:0,
      sechTxt:'',
      PageIndex: 1,
      PageSize:6,
      todolist:[],
      totalRecords:'',
      noMore:false,
      billState:'',
      ScrollerConfig:{
        content: '<i class="llse llse-aup"></i>',
        downContent: '<i class="llse llse-aup"></i>',
        height: 0,
        loadingContent: '<i class="llse llse-jiazaizhong loading"></i>',
        upContent: '<i class="llse llse-aup"></i>',
      },
      scrollerHeight: 0,
      scrollerTop:0,
    }
  },
  created(){
    this.tabNo = 1;
    this.sechTxt = sessionStorage.sechtxt;
  },
  watch: {
    tabNo(n, o) {
      if(n !== o) {
        this.PageIndex = 1;
        this.todolist = [];
        this.getData();
      }
    }
  },
  computed: {
    userinfo(){
      return localStorage.getItem('userinfo') === null?null:JSON.parse(localStorage.getItem('userinfo'));
    }
  },
  mounted() {
    this.$nextTick(function() {
      let existH = document.querySelector('.listhead-fix').clientHeight;
      this.scrollerHeight = (0 - 10 - existH).toString();
      this.scrollerTop = `${existH + 10}px`;
    })
  },
  methods: {
    getData(type){
      if (type == 1) {
        this.PageIndex = 1;
        this.todolist = [];
      }

      let query = {
        KeyWord:this.sechTxt,
        CorpGuid: this.userinfo.CorpGuid,
        TenantGuid: this.userinfo.TenantGuid,
        //演示用
        SaleCorpGuid: '20190627150930406000001118',
        PageIndex: this.PageIndex,
        PageSize: this.PageSize
      };
      if(this.tabNo == 1) {
        query.StateList = ['11', '12', '20', '21', '22', '23', '29', '30', '31', '39', '41','42','43','44','49','51','52','53','55','56']
      }
      if(this.tabNo == 2) {
        query.StateList = ['81']
      }

      if (sessionStorage.getItem('sechtxt')) {
        sessionStorage.removeItem('sechtxt');
      }
      this.Ajax.post('SearchGenericOrders',query).then((resp) => {
        if (resp.IsSuccess) {
          this.totalRecords = resp.TotalRecords;
          if(resp.Datas && resp.Datas.length > 0){
            resp.Datas.forEach((x) => {
              if(x.State == '81') {
                if(x.Pkgs !== x.RecPKGS) {
                  x.State = 'Reject'
                }
              }
            })
            this.PageIndex++;
            this.todolist = this.todolist.concat(resp.Datas);
            this.ScrollControl();
          }
        } else {
          this.Toast({
              message: '列表为空，请稍后刷新',
          });
        }
      });
    }, 

    goProgress(item) {
      console.log(item)
      this.$router.push({
        path: '/order/newProgress',
        query:{
          MainPoGuid: item.MainPoGuid,
          BBillGuid: item.Guid,
        }
      });
    },

    getLabelClass(val) {
      if (!val) {
        return "hide";
      }
      if (['11', '12', '20', '21', '22', '23', '29', '30', '31', '39'].indexOf(val) > -1) {
        return "org"
      }
      if (['41','42','43','44','49','51','52','53','55','56'].indexOf(val) > -1) {
        return ""
      }
      if (['81'].indexOf(val) > -1) {
        return "grnheavy"
      }
      if (val == 'Reject') {
        return "orgheavy"
      }
    },

    ScrollControl(){
      if(this.totalRecords <= this.PageSize){
        this.ScrollerConfig.content = '';
        this.$nextTick(() => {
          this.$nextTick(() => {
            this.$refs.Scroller.disablePullup();
            this.noMore = true;
          });
        });
      }

      if(this.todolist.length > 0 && this.$refs.Scroller){
        this.$nextTick(() => {
          this.$nextTick(() => {
            this.$refs.Scroller.donePullup();
          });
        });
      }

      if (this.totalRecords == this.todolist.length) {
        this.$nextTick(() => {
          this.$nextTick(() => {
            this.$refs.Scroller.disablePullup();
            this.noMore = true;
          });
        });
      }
    }
  }
}
</script>